<template>
  <section class="json-editor">
    <json-editor
      v-model="value"
      style="height: 100%"
      :value="value"
      :show-btns="showBtn"
      :mode="mode"
      lang="zh"
      @input="handleChange"
      @has-error="handleError"
    />
  </section>
</template>
<script>
import mixins from './../mixins'
import JsonEditor from '@/components/JsonEditor'
export default {
  name: 'VEditor',
  components: { JsonEditor },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {
        value: '',
        showBtn: false,
        mode: 'code'
      }
    }
  },
  computed: {
    mode() {
      return this.option.mode || 'code'
    },
    showBtn() {
      return this.option.showBtn || false
    },
    _error() {
      return this.error()
    },
    _error_message() {
      return this.error_message()
    }
  },
  methods: {
    getValue() {
      return this.value
    },

    setValue(k) {
      this.$set(this, 'value', k)
    },

    setCheck() {
      const { required, value } = this
      let error = false; let error_message = ''
      if (required) {
        const t = value
        if (t) {
          error = false
        } else {
          error = true
          error_message = '必填选项不能为空'
        }
      }
      this.error_ = error
      this.error_message_ = error_message
      this.fieldCheck()
    },
    handleError(err) {
      this.error_ = err
      this.error_message_ = '数据格式错误'
      this.fieldCheck()
    },
    handleChange() {
      this.dispatch_event('filed-value-change', this.getValue())
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
.editor {
  /deep/ {
    .w-e-toolbar {
      z-index: 2 !important;
    }
    .w-e-text-container {
      z-index: 1 !important;
    }
  }
  .editor-error {
    border: 1px solid $a3;
  }
}
</style>
